<html>
<head>
    <title>模具详情</title>
    #parse("sys/header.html")
    <link rel="stylesheet" href="${rc.contextPath}/statics/css/index.css">
</head>
<body>
<div id="rrapp" v-cloak class="t_container">
    <header class="t_header">
        <span>模具运行监控</span>
    </header>
    <main class="t_main">
        <!-- 第一行 -->
        <div class="t_left_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div class="t_mbox t_rbox">
                <i></i>
                <span> 故障次数</span>
                <h2>5</h2>
            </div>
            <div class="t_mbox t_ybox">
                <i></i>
                <span> 累积模次</span>
                <h2>1023</h2>
            </div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <div class="t_center_box">
            <div class="t_top_box">
                <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
                <ul class="t_nav">
                    <li>
                        <span>运行中</span>
                        <h1>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 1 || deviceMonitor.baseInfo.devStatus == -2" class="breathe-zc" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 2" class="breathe-kx" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 3" class="breathe-lx" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == 0" class="breathe-yc" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                            <div v-if="deviceMonitor.baseInfo.devStatus == -1" class="breathe-wz" :style="{'animation-duration':(deviceMonitor.baseInfo.currentStatus==0?'100ms':'1000ms')}"></div>
                        </h1>
                        <i></i>
                    </li>
                </ul>
                <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
            </div>
            <div class="t_bottom_box">
                <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
                <table class="t_table" style="border-top: 1px solid #053A98;margin-top: 5%;">
                    <tbody>
                    <tr>
                        <td>模具号</td>
                        <td>Z2-YZ-NE14-2</td>
                    </tr>
                    <tr>
                        <td>模具类型</td>
                        <td>上箱体</td>
                    </tr>
                    <tr>
                        <td>所在车间</td>
                        <td>铸造二车间</td>
                    </tr>
                    <tr>
                        <td>模框使用次数</td>
                        <td>8860</td>
                    </tr>
                    <tr>
                        <td>镶块使用次数</td>
                        <td>500</td>
                    </tr>
                    <tr>
                        <td>当前状态</td>
                        <td>在用</td>
                    </tr>
                    <tr>
                        <td>模具机型</td>
                        <td>NE15TG-AA</td>
                    </tr>
                    </tbody>
                </table>
                <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
            </div>
        </div>
        <div class="t_right_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <h1 class="t_title">模具换件记录</h1>
            <div style="position:absolute;width:50%;height:3.6rem;overflow-y:auto;overflow-x:hidden;margin-top:12%;">
                <table class="t_table" style="position:absolute;width: 100%; max-height: 4.6rem;margin-top:0;">
                    <thead>
                    <tr>
                        <th style="text-align:center;">备件名称</th>
                        <th style="text-align:center;">位置号</th>
                        <th style="text-align:center;">使用次数</th>
                        <th style="text-align:center;">换件时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>型芯21205</td>
                        <td>C262</td>
                        <td>1017</td>
                        <td>2021-10-21</td>
                    </tr>
                    <tr>
                        <td>型芯23209</td>
                        <td>C530</td>
                        <td>1017</td>
                        <td>2021-10-21</td>
                    </tr>
                    <tr>
                        <td>镶件23302</td>
                        <td>23302</td>
                        <td>23</td>
                        <td>2021-10-19</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <header class="t_b_h">
                <span>模具号</span>
                <h3>Z2-ZX-NE14-YD-1</h3>
            </header>
            <main class="t_b_m">
                <img :src="deviceMonitor.baseInfo.url" οnerrοr='this.src="${rc.contextPath}/statics/img/analyse/device_default.png"' alt="当前设备暂未设置图片">
            </main>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <!-- 第二行 -->
        <div class="b_left_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div style="position:absolute;width:94%;height:5rem;overflow-y:auto;overflow-x:hidden;margin:3%;">
                <table class="t_table" style="position:absolute;width: 100%; max-height: 4.6rem;margin-top:0;">
                    <thead>
                    <tr>
                        <th style="text-align:center;" colspan="2">模次采集记录</th>
                    </tr>
                    <tr>
                        <th style="text-align:center;">采集日期</th>
                        <th style="text-align:center;">次数</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>2021-11-10</td>
                        <td>926</td>
                    </tr>
                    <tr>
                        <td>2021-11-09</td>
                        <td>650</td>
                    </tr>
                    <tr>
                        <td>2021-11-08</td>
                        <td>20</td>
                    </tr>
                    <tr>
                        <td>2021-11-07</td>
                        <td>112</td>
                    </tr>
                    <tr>
                        <td>2021-11-06</td>
                        <td>55</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <!-- 模具成本变化趋势折线图 -->
        <div class="b_center_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div id="chart_1" class="echart"
                 style="width: 100%; height: 3.3rem; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;padding: 20px">
            </div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
        <!-- 模具运行和故障时长占比 -->
        <div class="b_right_box">
            <img class="t_l_line" src="${rc.contextPath}/statics/img/analyse/left_line.png" alt="">
            <div id="chart_4" class="echart"
                 style="width: 100%; height: 3.3rem; position: absolute; -webkit-tap-highlight-color: transparent; user-select: none;padding: 20px"></div>
            <img class="t_r_line" src="${rc.contextPath}/statics/img/analyse/right_line.png" alt="">
        </div>
    </main>
</div>

</body>
<script type="text/javascript" src="${rc.contextPath}/statics/plugins/echarts/echarts.min.js"></script>
<script type="text/javascript" src="${rc.contextPath}/js/device/rem.js"></script>
<script type="application/javascript">
    var vm = new Vue({
        el: "#rrapp",
        data: {
            timer: '',
            echartDom1: "",
            echartDom4: "",
            deviceMonitor: {
                alarmCount: 12,
                faultCount: 3,
                baseInfo: {
                    devCode: 'CPO-8859',
                    devName: 'SW机床',
                    devProductName: 'NE1系列机加线',
                    currentStatus: '正常',
                    longTime: '56小时32分钟',
                    faultCode: '000',
                    faultName: '暂无故障',
                    url: '${rc.contextPath}/statics/img/analyse/left_line.png'
                },
                spareInfo: [], // 设备换件记录
                statusDate: '',
                faultDate: ''
            },
            // 设备
            option1: {
                title: {
                    text: '近半年成本趋势',
                    top: 10,
                    left: 5,
                    textStyle: {
                        fontSize: 18,
                        color: '#fff'
                    },
                    subtext: ""
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },
                xAxis: {
                    type: 'category',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFFFFF'
                        },
                    },
                    data: ['2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: '#FFFFFF'
                        },
                    }
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        itemStyle:{
                            normal:{
                                color:'#de790d', //折点颜色
                                    lineStyle:{
                                    color:'#1622d8' //折线颜色
                                }
                            }
                        },
                        type: 'line'
                    }
                ]
            },
            option4: {
                title: {
                    text: '本月模具工作量与修模对比',
                    top: 10,
                    left: 5,
                    textStyle: {
                        fontSize: 18,
                        color: '#fff'
                    },
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: '50%',
                        data: [
                            { value: 150, name: '模具工作量' },
                            { value: 200, name: '修模数' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        },
        method: {
            init: function () {
                // 初始化模具成本趋势图表
                let dom1 = document.getElementById("chart_1");
                vm.echartDom1 = echarts.init(dom1);
                vm.echartDom1.setOption(vm.option1, true);
                // 初始化模具运行和故障时长对比报表
                let dom4 = document.getElementById("chart_4");
                vm.echartDom4 = echarts.init(dom4);
                vm.echartDom4.setOption(vm.option4, true);
            },
            getInfo: function () {
                Ajax.request({
                    url: "../device/stat/deviceMonitor?devCode=" + getQueryString("devCode"),
                    async: true,
                    successCallback: function (r) {
                        if (r.code == 0) {
                            if (r.deviceMonitor.baseInfo) {
                                vm.deviceMonitor.baseInfo = r.deviceMonitor.baseInfo;
                            }
                            vm.deviceMonitor.alarmCount = r.deviceMonitor.alarmCount;
                            vm.deviceMonitor.faultCount = r.deviceMonitor.faultCount;
                            vm.deviceMonitor.spareInfo = r.deviceMonitor.spareInfo;
                            // 设置设备状态时长统计分布
                            let devStatusDurationStat = r.deviceMonitor.devStatusDurationStat;
                            if(devStatusDurationStat){
                                vm.option1.series[0].data = devStatusDurationStat.seriesData;
                            }else{
                                vm.option1.title.subtext = "无数据";
                            }

                            vm.option4.series[0].data = r.deviceMonitor.faultDate;
                            if (vm.option4.series[0].data.length < 1) {
                                vm.option4.title.subtext = "无数据";
                            }

                            // vm.echartDom1.setOption(vm.option1, true);
                            // vm.echartDom4.setOption(vm.option4, true);
                        } else {
                            alert(r.msg);
                        }
                    }
                });
            }
        },
        beforeDestroy: function () {
            clearInterval(this.timer);
        }
    });
    vm.$options.method.init();
    vm.$options.method.getInfo();
    // 每五分钟刷新一次
    vm.timer = setInterval(vm.$options.method.getInfo, 300000);
    window.onresize = function () {
        vm.echartDom1.resize();
        vm.echartDom4.resize();
    }
    $(window).trigger('resize');
</script>
</html>
